import BaseView from "../baseView.js";


export default class EditCinema extends BaseView {
    constructor(id, cinemaId) {
        super(id);
        this.cinemaId = cinemaId;
        this.mounted();
        this.form = layui.form;
        
    }

    mounted() {
        $.ajax({
            type: 'get',
            url: '/theaters/getone/' + this.cinemaId,
            dataType: 'json',
            success: (data) => {
                if (data.code == 1) {
                    // console.log(data);
                    let res = data.data;
                    //修改Dom
                    $("#name").val(res.name);
                    // res.status==true?res.status='是':res.status='否';
                    if (res.status == true) {
                        $("option[value='是']").attr('selected', 'selected');
                    } else {
                        $("option[value='否']").attr('selected', 'selected');
                    }
                    $("#demo1").attr('src', `../../images/${res.photo}`);

                    // this.form.render()
                    layui.use('form', function () {
                        var form = layui.form;
                        //获得表单
                        // myform = form
                        //重新渲染表单
                        form.render();
                    });
                } else {
                    alert(data.msg)
                }
            }
        });
    }

    render() {
        $("#Content").html(`
        <div>
        <h1>编辑放映厅</h1>
        <hr/>
        </div>
        <div>
        <form class="layui-form" id='resetForm'>
        <div class="layui-form-item">
        <label class="layui-form-label">放映厅名称:</label>
            <div class="layui-input-block">
            <input type="text" id="name" required   placeholder="请输入放映厅名称"  class="layui-input">
            </div>
        </div>
        <form class="layui-form" action="">
            <div class="layui-form-item">
                <label class="layui-form-label">是否营业：</label>
                <div class="layui-input-block">
                    <select id="statuselected" name="状态" lay-verify="required">
                    <option value=""></option>
                    <option value="是">是</option>
                    <option value="否">否</option>
                    </select>
                </div>
            </div>
        </form>
        
        <div class="layui-form-item">
            <div class="layui-input-block">
            <button type='button' id='editBtn' class="layui-btn" lay-submit lay-filter="formDemo">修改</button>
            <button type="button" id='resetBtn' class="layui-btn layui-btn-primary">重置</button>
            <button type="button" id='backButn' class="layui-btn layui-btn-warm">返回</button>
            </div>
        </div>
        </form>
        </div>
        </div>

        <script>
        layui.use('form', function(){
        var form = layui.form;
        //获得表单
        // myform = form
        //重新渲染表单
        form.render();
        });
        </script>
       `);
    }

    handle() {

        $("#editBtn").click(() => {
            //alert("修改");
            $.ajax({
                type: "put",
                url: "/theaters/editext",
                data: {
                    "_id": this.cinemaId,
                    "name": $("#name").val(),
                    "status": $("#statuselected").val(),
                },
                dataType: "json",
                success: (data) => {
                    if (data.code == 1) {
                        layer.msg(data.msg);
                        // alert(data.msg);
                        //跳转页面
                        window.location.hash = "#/main/Showall"
                    } else {
                        layer.msg(data.msg);
                    }
                }
            })
        })


        


        //重置按钮
        $("#resetBtn").click(() => {
            // 清空表单数据
            this.mounted();
            
        })
        //返回
        $("#backButn").click(() => {
            window.location.hash = "#/main/Showall";
        })
    }

}